<!DOCTYPE html>
<html>
  <head>
    <title>Take me out</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- Bootstrap -->
    <link href="css/bootstrap.min.css" rel="stylesheet" media="screen">
    <link href="css/bootstrap.css" rel="stylesheet" media="screen">
    <link href="css/default.css" rel="stylesheet" media="screen">
    <link rel="stylesheet" type="text/css" href="css/custom.css">
    <link href="css/bootstrap-responsive.css" rel="stylesheet" media="screen">
    <link href="css/bootstrap-responsive.min.css" rel="stylesheet" media="screen">
  <link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css">

<meta name="description" content="aDescription"/>
<meta name="keywords" content=""/> 
<meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
	</head>
<!-- <link rel="stylesheet" type="text/css" href="/css/master.css" media="screen"/>	 -->
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript">
 function eventCallBack(data){

	document.getElementById("name").innerHTML = data.name;
	document.getElementById("date").innerHTML = data.date;
	document.getElementById("location").innerHTML = data.location;
	document.getElementById("url").innerHTML = data.url;
	document.getElementById("description").innerHTML = data.description;
	document.getElementById("source").innerHTML = data.source;	
 }
 function getEvent(){
		var result = false;
			$.ajax(
			{
				type: "POST",
				url : "process.php",
				data : {randomNum: "3"},
				dataType: 'json',
				async: true,
				cache: false,
				timeout:3500,
				error: function(x, textStatus, m){
					if (textStatus == "timeout"){
						document.getElementById('test').innerHTML = 'That took too long.<br /> Please Try Again.';
					}
					else {
						document.getElementById('test').innerHTML = 'An error occured.<br /> Please Try Again.';					
					}
					//document.getElementById('animate').style.backgroundImage = "None";
				}
			}).done(function(data){
				eventCallBack(data);
			})
			
}

</script>

</head>
<body >
	<h3>Hello World </h3>
	<?php require "EventClass.php" ?>
	
	
	<table>
		<tr>
			<td>Name</td>
			<td id="name"></td>
		</tr>
		<tr>
			<td>Date</td>
			<td id="date"></td>
		</tr>
		<tr>
			<td>Location</td>
			<td id="location"></td>
		</tr>
		<tr>
			<td>URL</td>
			<td id="url"></td>
		</tr>
		<tr>
			<td>Description</td>
			<td id="description"></td>
		</tr>
		<tr>
			<td>Source</td>
			<td id="source"></td>
		</tr>
	</table>
	
	<p id="test">Testing testing testing...</p>
	<p id="name"> </p>
	<p id="date"> </p>
	<p id="location"> </p>

	<button onclick="getEvent()">GetEvent</button>
	
	<?php
	 	$eventObject = new EventClass();
		$result = $eventObject->addFestivals();
		echo $result;
?>
</body>
